<template>
  <div style="width: 90%; height: 90%; border: 1px; margin-left: 5%">
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-input
            v-model="formInline.ProcessnameCode"
            placeholder="请输入工序名称/编号"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="formInline.Processstate"
            clearable
            placeholder="请选择"
          >
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="CraftShow()">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-button @click="processadd()">新增</el-button>
    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="id" label="序号" width="150" />
      <el-table-column prop="processname" label="工序名称" width="120" />
      <el-table-column prop="processcode" label="工序编号" width="200" />
      <el-table-column prop="processstate" label="状态" width="120" />
      <el-table-column prop="processexplain" label="工序说明" width="150" />
      <el-table-column prop="processremark" label="备注" width="120" />
      <el-table-column label="操作" width="200">
        <template #default>
          <el-button link type="primary" size="small" @click="handleClick"
            >删除</el-button
          >
          <el-button link type="primary" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageindex"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="count"
    >
    </el-pagination>
  </div>
</template>
  
<script>
import { processshow } from "../../api/process";
export default {
  data() {
    return {
      options: [],
      value: "",
      tableData: [],
      formInline: {
        pageindex: 1,
        pagesize: 10,
        ProcessnameCode: "",
        Processstate: "",
      },
      count: 0,
      multipleSelection: [],
    };
  },
  created() {
    this.CraftShow();
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    CraftShow() {
      processshow(this.formInline).then((ros) => {
        console.log(ros);
        this.tableData = ros.result.items;
        this.count = ros.result.totalCount;
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    processadd() {
      this.$router.push("ProcessAdd");
    },
    handleSizeChange(val) {
      //console.log(`每页 ${val} 条`);
      this.formInline.pagesize=val;
      this.CraftShow();
    },
    handleCurrentChange(val) {
      //console.log(`当前页: ${val}`);
      this.formInline.pageindex=val;
      this.CraftShow();
    },
  },
};
</script>


<!-- <template>
  <div class="echart" id="mychart" :style="myChartStyle"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      myChart: {},
      pieData: [
        {
          value: 463,
          name: "江苏"
        },
        {
          value: 395,
          name: "浙江"
        },
        {
          value: 157,
          name: "山东"
        },
        {
          value: 149,
          name: "广东"
        },
        {
          value: 147,
          name: "湖南"
        }
      ],
      pieName: [],
      myChartStyle: { float: "left", width: "100%", height: "400px" } //图表样式
    };
  },
  mounted() {
    this.initDate(); //数据初始化
    this.initEcharts();
  },
  methods: {
    initDate() {
      for (let i = 0; i < this.pieData.length; i++) {
        // this.xData[i] = i;
        // this.yData =this.xData[i]*this.xData[i];
        this.pieName[i] = this.pieData[i].name;
      }
    },
    initEcharts() {
      // 饼图
      const option = {
        legend: {
          // 图例
          data: this.pieName,
          right: "10%",
          top: "30%",
          orient: "vertical"
        },
        title: {
          // 设置饼图标题，位置设为顶部居中
          text: "国内院士前五省份图示",
          top: "0%",
          left: "center"
        },
        series: [
          {
            type: "pie",
            label: {
              show: true,
              formatter: "{b} : {c} ({d}%)" // b代表名称，c代表对应值，d代表百分比
            },
            radius: "30%", //饼图半径
            data: this.pieData
          }
        ]
      };
      this.myChart = echarts.init(document.getElementById("mychart"));
      this.myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    }
  }
};
</script> -->

